<div class="file-management">
  <!-- 页面标题和操作区域 -->
  <div class="header-section">
    <div class="title-section">
      <h2>文件管理</h2>
      <p>管理上传的文件和图片</p>
    </div>
  </div>

  <!-- 文件上传区域 -->
  <div class="upload-section">
    <nz-upload
      nzType="drag"
      [nzMultiple]="false"
      [nzBeforeUpload]="beforeUpload"
      [nzCustomRequest]="customUploadReq"
      (nzChange)="handleUploadChange($event)"
      [nzFileList]="fileList"
      class="upload-area"
    >
      <p class="ant-upload-drag-icon">
        <i nz-icon nzType="inbox"></i>
      </p>
      <p class="ant-upload-text">点击或拖拽文件到这里上传</p>
      <p class="ant-upload-hint">
        支持单个文件上传。仅支持图片格式，大小不超过5MB
      </p>
    </nz-upload>
  </div>

  <!-- 文件列表区域 -->
  <div class="files-section">
    <h3>已上传文件</h3>
    <nz-spin [nzSpinning]="loading">
      <div class="files-grid" *ngIf="files.length > 0; else emptyTemplate">
        <div class="file-card" *ngFor="let file of files">
          <div class="file-preview">
            <div class="preview-container" *ngIf="isImageFile(file.mimetype)">
              <img
                [src]="'/assets/placeholder.png'"
                [alt]="getFileDisplayName(file)"
                (click)="previewFile(file)"
                class="preview-image"
              />
            </div>
            <div class="preview-container icon-preview" *ngIf="!isImageFile(file.mimetype)">
              <i nz-icon [nzType]="getFileIcon(file.mimetype)" class="file-icon"></i>
            </div>
          </div>

          <div class="file-info">
            <h4 class="file-name" [title]="getFileDisplayName(file)">
              {{ getFileDisplayName(file) }}
            </h4>
            <p class="file-details">
              <span class="file-size">{{ formatFileSize(file.size) }}</span>
              <span class="file-type">{{ file.mimetype }}</span>
            </p>
            <p class="file-date">
              {{ formatDate(file.createdAt) }}
            </p>
            <div class="file-id">
              <span class="id-label">文件ID:</span>
              <span class="id-value" [title]="file._id">{{ file._id }}</span>
              <button
                nz-button
                nzType="link"
                nzSize="small"
                (click)="copyFileId(file._id)"
                class="copy-btn"
              >
                复制
              </button>
            </div>
          </div>

          <div class="file-actions">
            <nz-button-group>
              <button
                nz-button
                nzSize="small"
                nzType="primary"
                nzGhost
                (click)="previewFile(file)"
                *ngIf="isImageFile(file.mimetype)"
              >
                <i nz-icon nzType="eye"></i>
                预览
              </button>
              <button
                nz-button
                nzSize="small"
                nzType="primary"
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确定删除这个文件吗？"
                (nzOnConfirm)="deleteFile(file)"
              >
                <i nz-icon nzType="delete"></i>
                删除
              </button>
            </nz-button-group>
          </div>
        </div>
      </div>

      <ng-template #emptyTemplate>
        <nz-empty
          nzNotFoundImage="simple"
          nzNotFoundContent="暂无上传文件"
        ></nz-empty>
      </ng-template>
    </nz-spin>
  </div>

  <!-- 图片预览模态框 -->
  <nz-modal
    [(nzVisible)]="previewVisible"
    [nzTitle]="previewTitle"
    [nzFooter]="null"
    (nzOnCancel)="closePreview()"
    nzWidth="80%"
    nzCentered
  >
    <ng-container *nzModalContent>
      <div class="preview-modal-content">
        <img [src]="previewImage" [alt]="previewTitle" class="preview-modal-image" />
      </div>
    </ng-container>
  </nz-modal>
</div>
